<?php $widgetId = uniqid('widget_form_');?>
<style>
    .modal .row .col-xs-12 {padding:0 !important;}
    .nav-tabs-custom>.nav-tabs>li>a {padding:10px 30px;}
    .modal .close{display: block !important;margin-right:15px;}
    .modal-body{padding:0 15px;}
    .modal .nav-tabs-custom.flat{margin-bottom:0;}
    .modal .tab-footer{display: none;}
</style>
<?php $showFieldsConditons=array(1,3);?>
<style>
input.form-control[readonly],.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control,.form-control-readonly{
    background:#ffffff;
    border:none;
    padding-left:0;
    height: auto;
    resize: none;
}
div.form-control-readonly{
    white-space: pre-wrap;
}
.datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active,.datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active{
    background-color: #3c8dbc;
    border-radius: 5px;
}
</style>
<div class="row js-form-box" id="{$widgetId}">
    <form class="form-horizontal" action="{:$url?:$_SERVER['REQUEST_URI']}" method="post" id="data_form" autocomplete="off">
    	<div class="col-xs-12">
    		<div class="nav-tabs-custom flat">
                <?php if(count($groups)>1 || IS_PJAX || !IS_AJAX):?>
    	        <ul class="nav nav-tabs">
    	        	<volist name="groups" id="group">
    					<li <eq name="key" value="1">class="active"</eq>><a href="#tab{$key}" data-toggle="tab">{$group}</a></li>
    				</volist>
    	        </ul>
                <?php endif;?>
    	        <div class="tab-content no-padding">
    				<volist name="groups" id="group">
    	                <div class='tab-pane <?php if($key==1):?>active<?php endif;?>' id="tab{$key}" >
    			            <div class="box-body" style="max-width:900px;">
    			              	<volist name="fields[$key]" id="field">
                                    <script>
                                        window.DATAFORM_FIELDS = window.DATAFORM_FIELDS || {};
                                        DATAFORM_FIELDS['{:str_replace("__CFG__",".",$field['name'])}']={:json_encode($field)};
                                    </script>
    			              		<?php $readonly = $field['readonly']?'readonly="readonly"':'';?>
    			            	 	<if condition="$field['is_show']!=='0'">
                                        <if condition="$field['type']=='hidden'">
                                            <input type="hidden" class="form-control" name="{$field.name}" value="{$field['value']}">
                                        <else/>
                                            <div class="form-group" data-show="{$field['is_show']}">
                                                <label for="{$field['id']}" class="col-sm-2 control-label" data-name="{$field['name']}">{$field['title']}</label>
                                                <div class="col-sm-10">
                                                    <switch name="field.type">
                                                    	<case value="text">
                                                            <input type="text" class="form-control" name="{$field.name}" value="{$field.value}" {$readonly}>
                                                        </case>
                                                        <case value="textarea">
                                                        	<?php if($readonly):?>
                                                            	<div  class="form-control form-control-readonly" name="{$field.name}" {$readonly}>{:htmlspecialchars($field['value'])}</div>
                                                            <?php else:?>
                                                            	<textarea  class="form-control" name="{$field.name}" >{$field['value']}</textarea>
                                                            <?php endif;?>
                                                        </case>
                                                        <case value="timestamp">
                                                            <div class="input-group date">
                                                                <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                                                <input type="hidden" name="{$field.name}" class="text date" value="<?php echo $field['value']>0?$field['value']:time();?>" />
                                                                <input type="text" name="__{$field.name}__" {$readonly} data-name="{$field.name}" class="form-control date datepicker" value="<?php echo $field['value']>0?time_format($field['value']):date('Y-m-d h:i:s');?>" placeholder="请选择日期" data-type="timestamp" />
                                                            </div>
                                                        </case>
                                                        <case value="date">
                                                            <?php if($readonly):?>
                                                                <input type="text" class="form-control" name="{$field.name}" value="{$field.value}" {$readonly}>
                                                            <?php else:?>
                                                                <div class="input-group date">
                                                                    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                                                    <input type="hidden" name="{$field.name}" class="text date" value="{$field['value']}" />
                                                                    <input type="text" {$readonly} name="__{$field.name}__" data-name="{$field.name}" class="form-control date datepicker" value="{$field['value']}" placeholder="请选择日期" data-type="date" />
                                                                </div>
                                                            <?php endif;?>
                                                        </case>
                                                        <case value="datetime">
                                                            <?php if($readonly):?>
                                                                <input type="text" class="form-control" name="{$field.name}" value="{$field.value}" {$readonly}>
                                                            <?php else:?>
                                                                <div class="input-group date">
                                                                    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                                                    <input type="hidden" name="{$field.name}" class="text date" value="{$field['value']}" />
                                                                    <input type="text" {$readonly} class="form-control pull-right datepicker" data-name="{$field.name}" value="{$field['value']|time_format_fix}" placeholder="请选择时间" name="__{$field.name}__" data-type="datetime">
                                                                </div>
                                                            <?php endif;?>
                                                        </case>
                                                        <case value="select">
                                                            <?php if($readonly):?>
                                                                <input type="text" class="form-control" name="{$field.name}_label" value="<?php echo $field['value_dic'][$field['value']] ?>" {$readonly}>
                                                                <input type="hidden" class="form-control" name="{$field.name}" value="{$field['value']}">
                                                            <?php else:?>
                                                                <select class="form-control select2" style="width:100%" name="{$field.name}" {$readonly}>
                                                                    <option value="__NO_CHOOSE__">--- 请选择 ---</option>
                                                                    <?php $field['value_dic'] = is_array($field['value_dic'])?$field['value_dic']:[];?>
                                                                    <?php foreach($field['value_dic'] as $key=>$vo):?>
                                                                        <option value="{$key}" <?php if($field['value']==$key||(I('category')&&I('category')==$key)):?>selected<?php endif;?> <?php if(strpos($vo,'@')!==false):?>disabled=disabled<?php endif;?>><?php echo str_replace('@','',$vo); ?></option>
                                                                    <?php endforeach;?>
                                                                </select>
                                                            <?php endif;?>
                                                        </case>
                                                        <case value="radio">
                                                            <?php if($readonly):?>
                                                                <input type="text" class="form-control" name="{$field.name}" value="<?php echo $field['value_dic'][$field['value']] ?>" {$readonly}>
                                                            <?php else:?>
                                                                <div class="radio">
                                                                    <?php foreach($field['value_dic'] as $key=>$vo):?>
                                                                        <label class="">
                                                                            <input type="radio" value="{$key}" <?php if($field['value']==$key):?>checked<?php endif;?> name="{$field.name}" /><font>{$vo}</font>
                                                                        </label>
                                                                    <?php endforeach;?>
                                                                </div>
                                                            <?php endif;?>
                                                        </case>
                                                        <case value="checkbox">
                                                            <div class="checkbox">
                                                                <?php $checkedArr = explode(',',$field['value']); ?>
                                                                <?php foreach($field['value_dic'] as $key=>$vo):?>
                                                                    <label>
                                                                        <input type="checkbox" value="{$key}" name="{$field.name}[]" <?php if(in_array($key,$checkedArr)):?>checked="checked"<?php endif;?>><font>{$vo}</font>
                                                                    </label>
                                                                <?php endforeach;?>
                                                            </div>
                                                        </case>
                                                        <case value="editor">
                                                            <textarea {$readonly} class="textarea form-control" name="{$field.name}" style="min-height:164px">{$field['value']}</textarea>
                                                            <include file="Widget/dataform_editor" />
                                                        </case>
                                                        <case value="picture">
                                                            <input type="hidden" name="{$field.name}" value="{$field['value']}" class="kcs_upload_image" />
                                                        </case>
                                                        <case value="file">
                                                            <input type="hidden" name="{$field.name}" value="{$field['value']}" class="kcs_upload_file" />
                                                        </case>
                                                        <case value="grid">
                                                            <include file="Widget/dataform_grid" />
                                                        </case>
                                                        <case value="location">
                                                            <include file="Common/location" />
                                                        </case>
                                                        <default/>
                                                            <?php if(strpos($field['type'],'/')):?>
                                                                <?php $ctl->inputExtend($field)?>
                                                            <?php else:?>
                                                                <input type="{:$field['type']?$field['type']:'text'}" class="form-control" id="inputText3" name="{$field.name}" value="{$field['value']}" autocomplete="off">
                                                            <?php endif;?>
                                                    </switch>
                                                    <if condition="$field['remark'] and !$readonly">
                                                        <span style="color:#8d8d8d;font-size:13px;padding-top:10px; display:block;">{$field.remark}</span>
                                                    </if>
                                                </div>
                                            </div>
                                        </if>
    			                    </if>
    			            	</volist>
    			            </div>
    	                </div>
                    </volist>
    	        </div>
    	        <div class="tab-footer" style="max-width:900px;">
                    <div class="row">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-flat _dt_btns_  btn-primary"><i class="fa fa-save"></i> 保存</button> 　
                            <?php if(!$is_single):?>
            		            <button  class="btn btn-default btn-flat" onclick="javascript:history.back();return false;" data-dismiss="modal"><i class="fa fa-ban"></i> 取消</button>&nbsp;&nbsp;
                            <?php endif;?>
                        </div>
        		    </div>
    		    </div>
    	    </div>
    	</div>
    </form>
</div>

<script>
    KCONE.initKC2016.run();
    var widgetFormEl = $('#{$widgetId}');
    var cfgFields = {:json_encode($cfgFields?:[])};
	$(function(){
        widgetFormEl.find('.datepicker').each(function(){
            var $this=$(this);
            var dateType=$(this).attr('data-type');
            var handle="datepicker";
            var format="yyyy-mm-dd";
            var options={
                language: 'zh-CN',
                autoclose: true,
                templates:{
                    leftArrow: '<i class="fa fa-caret-square-o-left"></i>',
                    rightArrow: '<i class="fa fa-long-arrow-right"></i>'
                },
            }
            switch(dateType){
                case 'timestamp':
                case 'datetime':
                    format="yyyy-mm-dd hh:ii";
                    handle='datetimepicker';
                    break;
                case 'date':
                    format="yyyy-mm-dd";
                    handle='datepicker';
                    break;
            }
            options.format=format;
            var fieldName=$this.attr('data-name');
            $this[handle](options)
                    .on('changeDate',function(e){
                        var value=$(e.currentTarget).val();
                        if(dateType=='timestamp'){
                            //时间戳转换
                            value=e.date.getTime()/1000;
                        }
                        $('input[name='+fieldName+']').val(value);
                    });
        });

        widgetFormEl.find('.kcs_upload_image').each(function(){
            var field;
            for(var x in DATAFORM_FIELDS){
                if(DATAFORM_FIELDS[x].name==$(this).attr('name')){
                    field = DATAFORM_FIELDS[x];
                    break;
                }
            }
            var s = {
                'max': 5,
                'url': "{:U('file/upload')}",
                'width':'120px',
                'height':'120px',
            };

            $.extend(s,field.js||{});
            $(this).uploader(s);
        });

        widgetFormEl.find('.kcs_upload_file').each(function(){
            var field;
            for(var x in DATAFORM_FIELDS){
                if(DATAFORM_FIELDS[x].name==$(this).attr('name')){
                    field = DATAFORM_FIELDS[x];
                    break;
                }
            }
            var s = {
                'max': 1,
                'type':'file',
                // 'format':'json',
                'url': "{:U('file/upload')}",
                'width':'200px',
                'height':'50px',
            };

            $.extend(s,field.js||{});
            $(this).uploader(s);
        });

        // $('select.select2').select2();
        widgetFormEl.find('form').submit(AjaxFrom);

        // bootstrap 文字图标, 菜单使用
        widgetFormEl.find('[type="fa-icon"]').each(function(){
            var el = $(this);
            var icon = $('<i class="fa"></i>').css({'position':'absolute','top':'8px','left':'25px','font-size':'20px'});
            el.before(icon);
            el.css({'padding-left':'35px'});
            el.parent({'position':'relative'});
            el.on('keyup change',function(){
                icon.removeClass(icon.attr('class')).addClass('fa fa-'+el.val());
            }).change();
        });

        // required 样式
        +function(cfgFields){
            var _rules,_rule,_el,_label;
            var _required = '<span style="color:red;">* </span>';
            for(var x in cfgFields){
                _rules = cfgFields[x]['rule'].split(';')||[];
                for(var i=0;i<_rules.length;i++){
                    _rule = $.trim(_rules[i]);
                    if(_rule=='required'){
                        _el = widgetFormEl.find('[name="'+cfgFields[x]['name']+'"]');
                        _label = _el.closest('.form-group').find('label');
                        _label.html(_required+_label.text());
                    }
                }
            }
        }(cfgFields)
	});
</script>
